<template>
  <div class="headers">
    <div class="logo">
      <img class="h-logo" src="../assets/img/header/logo.jpg" alt />
    </div>
    <div class="tab-bar">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in nav" :key="index" :label="item.name" :name="item.name"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="search">
      <el-input class="search-input" v-model="keyword" placeholder="请输入歌名、歌词、歌手或专辑"></el-input>
      <i class="el-icon-search"></i>
      <span class="login-btn">登录</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      activeName: '首页',
      nav: [
        {
          name: '首页',
          path: '/',
        },
        {
          name: '排行榜',
          path: 'Top',
        },
        {
          name: '歌单',
          path: '/musiclist',
        },
        {
          name: 'MV',
          path: '/',
        },
        {
          name: '歌手',
          path: '/',
        },
        {
          name: '我的音乐',
          path: '/',
        },
      ],
    }
  },
  methods: {
    handleClick(tab) {
      this.$router.push(this.nav[tab.index].path)
      //this.$router.push({ name: this.nav[tab.index].path })
    },
  },
  components: {},
}
</script>

<style lang='less'>
.headers {
  width: 100%;
  height: 85px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 10px 0 rgb(52 52 52 / 10%);
  background: #fff;
}

.logo {
  float: left;
}

.h-logo {
  display: inline-block;
  margin-left: 360px;
  margin-top: 10px;
  cursor: pointer;
}

.el-tabs__nav {
  margin-left: 55px;
  height: 80px;
  line-height: 80px;
}

.tab-bar .el-tabs__nav-wrap::after {
  width: 0px;
}

.tab-bar .el-tabs__item {
  padding: 0 20px;
  font-size: 16px;
  text-decoration: none;
  color: #909399;
}

&:hover {
  color: #000;
}

.tab-bar .el-tabs__active-bar {
  background-color: #ff641e;
}

.tab-bar .el-tabs__item.is-active {
  color: #000;
}

.tab-bar {
  float: left;
}

.search .el-input {
  width: 230px;
  margin-left: 190px;
  margin-top: 20px;
}

.search i {
  margin-left: 10px;
  font-size: 29px;
  cursor: pointer;
}

.login-btn {
  margin-left: 20px;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 3px;
}
</style>
